<template>
  <Menu
    :ref="menuRef"
    :active-name="activeMenu"
    theme="dark"
    width="auto"
    :class="menuitemClasses"
    :open-names="openNames"
    @on-select="handleSelectChange"
    class="larryyu-sider-menu"
  >
    <SiderMenuItem :menus="menus" :isCollapsed="isCollapsed" />
  </Menu>
</template>
<script>
import { Menu, MenuItem } from "view-design";
import Uuid from "uuid";
import SiderMenuItem from "./SiderMenuItem.vue";
export default {
  components: {
    Menu,
    MenuItem,
    SiderMenuItem
  },
  props: {
    isCollapsed: {
      type: Boolean,
      default: false
    },
    /** 菜单配置 */
    menus: {
      type: Array,
      default: function() {
        return [];
      },
      required: true
    }
  },
  model: {
    event: ["onSelectChange"]
  },
  data() {
    return {
      /** 活动菜单 */
      activeMenu: "",
      openNames: [],
      menuRef: Uuid.v1(),
      idMapMenu: {}
    };
  },
  computed: {
    menuitemClasses: function() {
      return [
        "sider-menu",
        this.isCollapsed ? "collapsed-menu" : "unclosed-menu"
      ];
    }
  },
  watch: {
    $route(to) {
      this.activeMenu = this.$route.meta.id;
    }
  },
  created() {
    this.initMenuInfo();
    /** 计算选中菜单 */
    this.activeMenu = this.$route.meta.id;
    /** 计算展开菜单 */
    let openNames = [];
    if (this.$route.meta.parentId) {
      let menu = this.idMapMenu[this.$route.meta.parentId];
      while (menu) {
        openNames.push(menu.id);
        menu = this.idMapMenu[menu.parentId];
      }
    }
    this.openNames = openNames;
    this.handleSelectChange(this.activeMenu);
  },
  methods: {
    /** 初始化菜单数据 */
    initMenuInfo() {
      let menus = this.menus;
      let stack = [];
      stack = stack.concat(menus);
      const idMapMenu = {};
      while (stack.length > 0) {
        const currnetMenu = stack.pop();
        if (!currnetMenu.meta) {
          currnetMenu.meta = {};
        }
        if (currnetMenu.meta.title && !currnetMenu.meta.name) {
          currnetMenu.meta.name = currnetMenu.meta.title;
        } else if (!currnetMenu.meta.title && currnetMenu.meta.name) {
          currnetMenu.meta.title = currnetMenu.meta.name;
        } else if (!currnetMenu.meta.title && !currnetMenu.meta.name) {
          currnetMenu.meta.title = "";
          currnetMenu.meta.name = "";
        }
        if (!currnetMenu.meta.icon) {
          currnetMenu.meta.icon = "ios-navigate";
        }
        if (typeof currnetMenu.meta.show === "undefined") {
          currnetMenu.meta.show = true;
        }
        if (!currnetMenu.id) {
          currnetMenu.id = Uuid.v1();
        }
        if (!currnetMenu.meta.id) {
          currnetMenu.meta.id = currnetMenu.id;
        }
        idMapMenu[currnetMenu.id] = currnetMenu;
        if (currnetMenu.children) {
          const childrens = currnetMenu.children;
          for (let i = 0; i < childrens.length; i++) {
            const children = childrens[i];
            if (!children.parentId) {
              children.parentId = currnetMenu.id;
            }
            if (!children.meta.parentId) {
              children.meta.parentId = children.parentId;
            }
          }
          stack = stack.concat(childrens);
        }
      }
      for (let id in idMapMenu) {
        let menu = idMapMenu[id];
        menu.fullPath = menu.path;
        let parentMenu = idMapMenu[menu.parentId];
        while (parentMenu) {
          if (menu.fullPath.substr(0, 1) !== "/") {
            menu.fullPath = parentMenu.path + "/" + menu.fullPath;
            parentMenu = idMapMenu[parentMenu.parentId];
          } else {
            break;
          }
        }
      }
      this.idMapMenu = idMapMenu;
    },
    handleSelectChange(menu) {
      this.$emit("onSelectChange", menu);
    }
  }
};
</script>
<style lang="less">
</style>
